<!-- 设备列表 -->
<template>
	<view>
		<!-- 总数与搜索框 -->
		<block>
			<view class="oneText">
				<!-- 搜索框 -->
				<view class="oneTextsearch">
					<view style="display: flex;">
						<u-input v-model="searchValue" placeholder="请输入订单号" type="text" border="false"
							:custom-style="customStyle" />
						<u-button type="primary" class="oneTextsearchBtn" :custom-style="oneTextsearchBtn"
							@click="searchChange">搜索</u-button>
					</view>
				</view>
			</view>
		</block>
		<!-- 列表 -->
		<view class="table_h  ft26 tac">
			<block v-if="loadList.length !== 0" v-for="item in loadList" :key="item.id">
				<view class="mb30 plr40 bf border-r1 shadow">
					<view class="ptb20 bdb" style="display: flex;justify-content: space-between;align-items: center;">
						<view style="text-align: left;">
							<text class="h50">订单编号：{{ item.orderNo }}</text>
							<view class="h50" style="margin-top: 10upx;">套餐名称：{{ item.mealName }}</view>
							<view class="h50">支付时间：{{ item.payTime }}</view>
							<view class="h50">有效期：{{ item.validTime }}</view>
						</view>
						<view style="text-align: left;">
							<view class="h50" style="color: aquamarine;font-size: 50upx;margin-bottom: 20upx;">
								￥{{item.countMoney}}</view>
							<view class="h50" style="color: blue;">套餐天数：{{ item.days }}天</view>
							<view class="h50" style="color: red;">套餐次数：{{ item.nums==-1?'不限次':item.nums }}次</view>
						</view>
					</view>

				</view>
			</block>
			<view class="flex_aj column ptb20" v-if="showTime && loadList.length == 0">
				<view class="c9 pt20">暂无数据~</view>
			</view>

			<uni-load-more v-if="showTime && loadList.length > 0" :status="loadMoreText" color="#999">
			</uni-load-more>
		</view>


	</view>
</template>

<script>
	import loadMore from '@/mixins/loadMore'
	import {
		mealOrderList
	} from '@/api/user'
	export default {
		mixins: [loadMore],
		data() {
			return {
				customStyle: {
					backgroundColor: "#fff",
					'width': '220px',
				},
				oneTextsearchBtn: {
					borderRadius: '5px',
				},
				showTime: false,
				searchValue: '',
			}
		},
		onShow() {
			this.myDeviceList()
		},

		methods: {
			// 搜索
			searchChange() {
				this.page = 1
				this.loadList = []
				this.myDeviceList(this.searchValue)
			},
			// 设备列表
			async myDeviceList(orderNo) {
				const res = await mealOrderList(orderNo || '')
				this.showTime = true
				this.loadList = this.page == 1 ? res.rows : [...this.loadList, ...res.rows]
				this.pageLength = res.rows.length
				this.loadMoreText = res.rows.length < this.limit ? 'noMore' : 'more'

			},
		}
	}
</script>

<style scoped lang="scss">
	.oneText {
		// position: fixed;
		padding: 20rpx;
		background-color: #ebeef3;
		// margin-bottom: 30upx;
		margin-top: 10upx;
		box-shadow: 2upx 2upx 2upx 2upx #ebeef3;
		color: #000;
		font-size: 32upx;
		padding-bottom: 40upx;

		.oneTextsearch {
			padding-top: 10upx;
			display: flex;
			justify-content: space-around;

			.oneTextsearchSelect {
				width: 80%;
				height: 70upx;
				margin-right: 20upx;
				background-color: #fff;
				border-radius: 30upx;

			}

			.oneTextsearchBtn {
				position: relative;
				top: -5upx;
				transform: scale(1, 0.85);
				margin-left: 50upx;

			}
		}

	}
</style>